<template>
  <div class="doctor-rank-list">
    <div v-for="doctor in sortedDoctorList" :key="doctor.name" class="doctor-rank-item">
      <div class="avatar">{{ doctor.avatar }}</div>
      <div class="info">
        <div class="name">{{ doctor.name }}</div>
        <div class="dept">{{ doctor.dept }}</div>
        <div class="stats">
          <span>满意度: {{ doctor.stats.satisfaction }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { computed } from 'vue'

const props = defineProps<{ doctorList: any[] }>()
const sortedDoctorList = computed(() => {
  return [...props.doctorList].sort((a, b) => {
    // 假设满意度为"98%"格式，去掉%后转数字
    const sa = parseFloat(a.stats.satisfaction);
    const sb = parseFloat(b.stats.satisfaction);
    return sb - sa;
  })
})
</script>
<script lang="ts">
export default {}
</script>
<style scoped>
.doctor-rank-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.doctor-rank-item {
  display: flex;
  align-items: center;
  background: #f6fafd;
  border-radius: 10px;
  padding: 12px 18px;
  gap: 18px;
}
.avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #0d6efd;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
}
.info {
  flex: 1;
}
.name {
  font-weight: 600;
  font-size: 1.08rem;
}
.dept {
  color: #1976d2;
  font-size: 0.95rem;
  margin-bottom: 2px;
}
.stats {
  font-size: 0.92rem;
  color: #888;
  display: flex;
  gap: 18px;
}
</style> 